<template>
    <div class="header">
      <div class="header-left">
        <span class="iconfont icon-arrow-left-copy"></span>
      </div>
      <div class="header-input">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" placeholder="输入城市景点">
      </div>
      <router-link to="/city">
      <div class="header-right">
        {{this.$store.state.city}}
        <span class="iconfont icon-lower-triangle"></span>
      </div>
      </router-link>
    </div>
</template>

<script>
    export default {
        name: "Header",
      props:{
          city:String
      }
    }
</script>

<style lang="stylus" scoped>
   .header{
     width: 100%;
     height: .45rem;
     background: #00bcd4;
     display: flex;
     align-items: center;
     color: #fff;
     font-size: .14rem;
   }
  .header-input{
    flex: 1;
    background: #fff;
    height: .3rem;
    border-radius: .03rem;
    color: #ccc;
    line-height: .26rem;
    margin-left .06rem;
  }
   span{
     display: inline-block;
     margin-left: 5px;
     font-size: .18rem;
     vertical-align: middle;
   }
   .header-right{
     margin: 0 .06rem;
     color:#fff;
   }

</style>
